<template>
  <div style="margin: 20px;">
    <h1 style="text-align: center">发布新课程</h1>
    <el-steps :active="1" process-status="finish" align-center>
      <el-step title="填写课程基本信息"></el-step>
      <el-step title="创建课程大纲"></el-step>
      <el-step title="最终发布"></el-step>
    </el-steps>
    <div style="margin-top: 30px">
      <el-button type="text" @click="onAddChapter">添加章节</el-button>
      <br>
      <el-card v-for="chapter of chapterList" class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ chapter.title }}</span>
          <el-button style="float: right; padding: 3px 5px" type="text" @click="onDelChapter(chapter.id)">删除</el-button>
          <el-button style="float: right; padding: 3px 5px" type="text" @click="onEditChapter(chapter.id)">编辑</el-button>
          <el-button style="float: right; padding: 3px 5px" type="text" @click="onAddVideo(chapter.id)">添加小节</el-button>
        </div>
        <el-card v-for="video of chapter.videos" class="box-card">
          <span>{{ video.title }}</span>
          <el-button style="float: right; padding: 3px 5px" type="text" @click="onDelVideo(video.id)">删除</el-button>
          <el-button style="float: right; padding: 3px 5px" type="text" @click="onEditVideo(video.id)">编辑</el-button>
          <el-button style="float: right; padding: 3px 5px" type="text" @click="seeVideo(video.videoSourceId)">预览</el-button>
        </el-card>
      </el-card>

      <el-button style="margin-top: 30px" @click="previous">上一步</el-button>
      <el-button type="primary" @click="next">下一步</el-button>
    </div>

    <el-dialog :title="titleChapter" :visible.sync="visibleChapter">
      <el-form :model="chapter" label-width="120px">
        <el-form-item label="章节标题">
          <el-input v-model="chapter.title"/>
        </el-form-item>
        <el-form-item label="章节排序">
          <el-input-number v-model="chapter.sort" controls-position="right" :min="0"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visibleChapter = false">取 消</el-button>
        <el-button type="primary" @click="submitChapter">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="titleVideo" :visible.sync="visibleVideo">
      <el-form :model="video" label-width="120px">
        <el-form-item label="课时标题">
          <el-input v-model="video.title"/>
        </el-form-item>
        <el-form-item label="课时排序">
          <el-input-number v-model="video.sort" controls-position="right" :min="0"/>
        </el-form-item>
        <el-form-item label="是否免费">
          <el-radio v-model="video.isFree" :label="1">免费</el-radio>
          <el-radio v-model="video.isFree" :label="0">默认</el-radio>
        </el-form-item>
        <el-form-item label="上传视频">
          <el-upload
            class="upload-demo"
            :action="api+'/video/upload/'+courseId"
            :headers="headers"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            limit="1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visibleVideo = false">取 消</el-button>
        <el-button type="primary" @click="submitVideo">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      class="video"
      @close="colseVideo()"
      :visible.sync="playShow"
    >

      <ali-player
        v-if="playAuth"
        :vid="vid"
        :playauth="playAuth"
        qualitySort="asc"
        format="m3u8"
        mediaType="video"
        :encryptType=1
        ref="player"
        :autoplay=false
        :isLive=false
        :rePlay=false
        :preload=true
        controlBarVisibility="hover"
        :useH5Prism=true
      >
      </ali-player>

    </el-dialog>

  </div>
</template>

<script>
import {chaDelete, chaGetById, chaListByCourseId, chaSaveOrUpdate} from '@/api/chapter'
import {getToken} from '@/utils/auth'
import {vidDelete, vidGetById, vidSaveOrUpdate} from '@/api/video'

import {getAuth} from '@/api/vod'

import VueAliplayer from '@/components/AliPlayer'
import {couGetById} from '@/api/course'

export default {
  components: { "ali-player": VueAliplayer },
  data() {
    return {
      cover:'',
      courseId: this.$route.query.courseId,
      chapterList: [],
      chapter: { courseId: this.$route.query.courseId, sort: 0 },
      video: { courseId: this.$route.query.courseId, sort: 0, isFree: 0 },

      titleChapter: '',
      visibleChapter: false,

      titleVideo: '',
      visibleVideo: false,

      api: process.env.VUE_APP_BASE_API,
      headers: {
        token: getToken()
      },

      playShow: false,
      vid: '', //视频vid
      playAuth: '', //鉴权地址

    }
  },
  created() {
    if (this.$route.query.courseId) {
      couGetById(this.$route.query.courseId).then(res => {
        this.cover = res.data.cover
        console.log(this.cover)
      })
    }
    chaListByCourseId(this.courseId).then(res => {
      this.chapterList = res.data
    })
  },
  methods: {

    colseVideo(){
      // //重新子组件初始化
      this.$refs.player.initAliplayer()
    },

    seeVideo(vid) {
      var that = this
      that.vid=''
      that.playAuth=''

      //根据vid去查凭证
      getAuth(vid).then(res => {

        that.vid = vid
        that.playAuth = res.data
        that.playShow = true

      })
    },


    onAddChapter() {
      this.titleChapter = '添加课程'
      this.chapter = { courseId: this.$route.query.courseId, sort: 0 }
      this.visibleChapter = true

    },
    onEditChapter(id) {
      this.titleChapter = '修改课程'
      chaGetById(id).then(res => {
        this.chapter = res.data
      })
      this.visibleChapter = true
    },
    submitChapter() {
      chaSaveOrUpdate(this.chapter).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功')
          location.reload()
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    onDelChapter(id) {
      this.$confirm('此操作将永久删除该章节, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        chaDelete(id).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功!')
          } else {
            this.$message.error('删除失败!')
          }
          location.reload()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    onAddVideo(id) {
      this.titleVideo = '添加小节'
      this.video = {
        chapterId: id,
        courseId: this.$route.query.courseId,
        sort: 0,
        isFree: 0
      }
      this.visibleVideo = true

    },
    onEditVideo(id) {
      this.titleVideo = '修改小节'
      vidGetById(id).then(res => {
        this.video = res.data
      })
      this.visibleVideo = true
    },
    submitVideo() {
      vidSaveOrUpdate(this.video).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功')
          location.reload()
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    onDelVideo(id) {
      this.$confirm('此操作将永久删除该小节, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        vidDelete(id).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功!')
          } else {
            this.$message.error('删除失败!')
          }
          location.reload()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    uploadSuccess(response) {
      this.video.videoSourceId = response.data
      this.$message.success('上传成功')
    },
    uploadError() {

      this.$message.error('上传失败')
    },
    selVideo(url) {
      window.open(url, '_blank')
    },
    previous() {
      this.$router.push({ path: '/course/save', query: { courseId: this.courseId } })
    },
    next() {
      this.$router.push({ path: '/course/publish', query: { courseId: this.courseId } })
    }
  }
}
</script>

<style>

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

</style>
